<template>
    <div class="container">
        <div class="lineone">
            <TopNav :obj="obj"></TopNav>
        </div>
        <div class="linetow">
          <GaiLan class="gailan_jiankong"></GaiLan>
          <GongGao class="gonggao"></GongGao>
        </div>
        <div class="linethree">
          <EchartList class="list"></EchartList>
        </div>

    </div>
</template>

<script lang="ts">
import GaiLan from './components/GaiLan.vue'
import GongGao from './components/GongGao.vue'
import EchartList from './components/EchartList.vue'
import TopNav from '@/components/TopNav.vue';
import { defineComponent, reactive, toRefs } from "vue";
export default defineComponent({
    name: 'dashboardView',
    components: { 
        GaiLan, 
        GongGao, 
        EchartList, 
        TopNav },
    setup() {
        const Data = reactive({
            obj: {
                path: '',
                title: '仪表盘',
                msg: '设备概览和传感数据可视化'
            }
        })
        return {...toRefs(Data)}
    }
});
</script>

<style lang="less"  scoped>
.container {
    width: 100%;
    box-sizing: border-box;

    .linetow {
        display: flex;
        margin-top: 10px;

        .gailan_jiankong {
            width: 75%;
            display: flex;


        }

        .gonggao {
            width: 25%;
        }
    }

    .linethree {
        width: 100%;

        .list {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
        }
    }
}
</style>